<template>
  <view class="uni-load-more text-center cl-second" v-if="status != 1">
    <!-- 正在加载 -->
    <view class="load-tips" v-if="status == 0">
      <text>正在加载..</text>
    </view>

    <!-- 加载失败 -->
    <view class="load-tips" @tap="retry" v-else-if="status == 2">
      <text>加载失败，</text>
      <text class="underline pointer pointer-filter" @tap="retry">点我重试</text>
    </view>

    <!-- 暂无更多数据 -->
    <view class="load-tips" v-else-if="status == 3">
      <text>暂无更多数据</text>
    </view>

    <!-- 查看更多 -->
    <view class="load-tips underline pointer" @tap="lookMore" v-else-if="status == 4">
      <text>查看更多</text>
    </view>

    <!-- 首次请求无数据 -->
    <view class="load-tips text-center" v-else-if="status == 5">
      <image class="block" src="/static/images/no_data.png" mode="widthFix" />
      <view class="mt-10 text-center">
        <slot name="extra">
          <text>暂无更多数据..</text>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniLoadMore",

  props: {
    status: {
      type: Number,
      default: 0
    }
  },

  methods: {
    /**
     * 向父组件发射请求数据事件
     */
    retry() {
      this.$emit("retry");
    },

    /**
     * 向父组件发射查看更多事件
     */
    lookMore() {
      this.$emit("lookMore");
    }
  }
};
</script>

<style lang="scss" scoped>
.uni-load-more {
  padding: 30upx 0;

  image {
    width: 300upx;
    margin: 0 auto;
  }
}
</style>
